<script lang="ts">
  import { tooltip } from "$lib/js/tooltip";
  import type { TabType } from "./ebm";
  export let items: TabType[] = [];
  export let activeTabValue = 1;
  export let closable = false;
  const handleClick = (tabValue) => () => (activeTabValue = tabValue);

  export let functionClose = (tabValue) => {};
</script>

<div class="w-full h-full flex flex-col">
  <header class="w-full flex flex-row">
    <ul
      class="flex-1 bg-gray-300 flex flex-row pl-0 mb-0 border-b-2 border-solid border-gray-200 overflow-x-scroll overflow-y-hidden"
    >
      {#each items as item}
        <li
          class="{activeTabValue === item.value
            ? 'active'
            : 'bg-gray-300'} flex flex-row text-center"
        >
          <span
            class="truncate max-w-xs"
            on:click={handleClick(item.value)}
            use:tooltip={{ theme: "light" }}
            title={item.title}
          >
            {item.label}
          </span>
          {#if closable}
            <i
              class="px-2 visible items-center flex justify-center fas fa-window-close cursor-pointer text-gray-700"
              use:tooltip={{ theme: "light" }}
              title="Close {item.label}"
              on:click={() => functionClose(item.attributes)}
            />
          {/if}
        </li>
      {/each}
    </ul>
    <div class="flex-grow-0 flex flex-row py-2">
      <button
        class="bg-document-add bg-no-repeat pl-8"
        use:tooltip={{ theme: "light" }}
        title="Toggle Preview"
      />
      <button
        class="bg-folder-add bg-no-repeat pl-8"
        use:tooltip={{ theme: "light" }}
        title="Split Editor"
      />
    </div>
  </header>
  {#each items as item}
    {#if activeTabValue == item.value}
      <div class="items-center flex-grow">
        <svelte:component this={item.component} attributes={item.attributes} />
      </div>
    {/if}
  {/each}
</div>

<style>
  li {
    margin-bottom: 1px;
  }

  span {
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    display: block;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }

  li:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
  }

  li.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    margin-bottom: -1px;
  }
</style>
